<template>
  <div class="page page-screenshare-image-client">
    <h4 class="text-center">演示窗口（Image方案）</h4>
    <form class="page-body">
      <fieldset>
        <legend>直播画面</legend>
        <div class="fieldset-content">
          <img :src="imgSrc" >
        </div>
      </fieldset>
    </form>
  </div>
</template>

<script>
import io from 'socket.io-client'

export default {
  name: 'page-screenshare-image-client',
  data () {
    return {
      wsWaiter: null,
      imgSrc: '',
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    init () {
      this.wsWaiter = io.connect(`http://127.0.0.1:7600/clients`)
      this.wsWaiter.on('screenshot', (data) => {
        console.log('clients receive message')
        this.imgSrc = data
      })
    },
  }
}
</script>

<style scoped lang="less">
@import "~@/assets/css/_mixins.less";
@import "~@/assets/css/_color.less";
@gapSize: 15px;

.page-screenshare-image-client {
  display: flex;
  flex-direction: column;
  .page-body {
    height: 0;
    flex-grow: 1;
    fieldset {
      height: 100%;
      .fieldset-content {
        height: calc(100% - 2em);
        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
          background-color: #333;
        }
      }
    }
  }
}
</style>
